<template>
  <div>
    <!-- Top -->
    <van-nav-bar class="fixed-top" title="智慧商城" />
    <!-- 搜索 -->
    <van-search
      v-model="seek"
      placeholder="请输入搜索关键词"
      class="search-module"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in slideshow" :key="index">
        <img :src="item.imgUrl" alt="" width="100%" height="200%" />
      </van-swipe-item>
    </van-swipe>
    <!-- 通知栏 -->
    <van-notice-bar
      color="#fff"
      background="#828282"
      border="false"
      left-icon="volume-o"
      scrollable
      text="智慧商城2.0全新上线，更多新品等你来选~"
    />
    <!-- 宫格 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="(item, index) in group"
        :key="index"
        :icon="item.imgUrl"
        :text="item.text"
      />
    </van-grid>
    <!-- 图片 -->
    <van-image
      v-for="(item, index) in bigImg"
      :key="index"
      width="100%"
      height="100"
      :src="item.imgUrl"
    />
    <!-- 猜你喜欢 -->
    <div v-html="richText"></div>
    <!-- 详情 -->
    <div class="detail-module">
      <van-card
      v-for="(item, index) in goodsLite"
      :key="index"
      :price="item.goods_price_max"
      :title="item.goods_name"
      :thumb="item.goods_image"
      :origin-price="item.line_price_max"
    >
      <template #tags>
        <van-tag plain type="danger">已售{{ item.goods_sales }}件</van-tag>
      </template>
    </van-card>
    </div>
  </div>
</template>

<script>
import { getIndex } from '../api/index'
export default {
  name: 'HomeCom',
  data () {
    return {
      seek: '', // 搜索的值
      slideshow: [], // 轮播图
      group: [], // 导航组
      bigImg: [], // 大图片
      richText: '', // 猜
      goodsLite: []
    }
  },
  async created () {
    const res = await getIndex()
    console.log(res, 'home页加载完毕获得的数据')
    // 轮播图
    this.slideshow = res.data.pageData.items[1].data
    // 导航组十张图片
    this.group = res.data.pageData.items[3].data
    // 大图
    this.bigImg = res.data.pageData.items[4].data
    // 猜
    this.richText = res.data.pageData.items[5].params.content
    // 详情
    this.goodsLite = res.data.pageData.items[6].data
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #c21401;
  color: #fff;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 8%;
  text-align: center;
  background-color: #39a9ed;
}
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; /* 根据需要调整z-index的值，确保Top模块显示在其他内容之上 */
}
.search-module {
  margin-top: 44px; /* 根据van-nav-bar默认高度调整 */
}
.detail-module {
  margin-bottom: 45px; /* 根据底部内容的高度调整 */
}
</style>
